Add Mastodon comments feature. Fixes #157 #158
Conversation
www/assets/css/theme.css
Outdated
| * ╰───────────────────────────────────────────────────────────────╯ | ||
| **/ | ||
|
|
||
| section#comments #comments-wrapper { |
There was a problem hiding this comment.
nitpicks, mostly for consistency :
#comments-wrapperis enough here- empty lines between CSS rules please (much easier to navigate with Vim)
- space after the colon sign please (
:rather than:)
www/assets/css/theme.css
Outdated
| margin:1.5em 0; | ||
| padding:0 var(25px); | ||
| } | ||
| section#comments .comment { |
There was a problem hiding this comment.
.comment is enough here and in all following rules
www/layouts/_default/single.html
Outdated
| </div> | ||
| <noscript>Vous devez activer Javascript pour voir les commentaires.</noscript> | ||
| <script src="/js/purify.min.js"></script> | ||
| <script type="text/javascript"> |
There was a problem hiding this comment.
would you mind putting this script in a separate file, e.g. comments.js or mastodon-comments.js please ?
www/assets/css/theme.css
Outdated
| * ╭───────────────────────────────────────────────────────────────╮ | ||
| * │ Comments │ | ||
| * ╰───────────────────────────────────────────────────────────────╯ | ||
| **/ |
There was a problem hiding this comment.
I think this could be in a separate CSS file, e.g. comments.css, as it’s only used by single-page articles.
|
Yes, I have tested it on the existing article with the provided conf sample: I will update the PR with your comments |
There was a problem hiding this comment.
Well that’s pretty good ! It seems to be working really well on my end, the render could be a bit fancier, especially with heavily nested responses, but we’ll address that later, it’s good enough as is.
I do have a few problems with the overall code structure, though. The main one being the huge js script in the middle of layouts/partials/comments.
www/layouts/partials/comments.html
Outdated
| </noscript> | ||
| </div> | ||
| <noscript>Vous devez activer Javascript pour voir les commentaires.</noscript> | ||
| <script type="text/javascript"> |
There was a problem hiding this comment.
Moving the code to fetch the comments to a separate layout partial is a step in the right direction, but I would greatly prefer if this was in it’s own js file in ergol/code/comments.js.
You can use Hugo’s js.Build with a params dict to pass in values from the front matter to the js script.
There was a problem hiding this comment.
I was not able to pass Hugo variables to a separate js file, thanks for the tip, I will have a look
www/layouts/partials/comments.html
Outdated
| href="https://{{ .host }}/@{{ .username }}/{{ .id }}">le post original</a> sur Mastodon.</p> | ||
| </noscript> | ||
| </div> | ||
| <noscript>Vous devez activer Javascript pour voir les commentaires.</noscript> |
There was a problem hiding this comment.
This noscript tag is redundant, the one above is more detailed
www/layouts/partials/comments.html
Outdated
| if ( | ||
| descendants && | ||
| Array.isArray(descendants) && | ||
| descendants.length > 0 | ||
| ) { |
There was a problem hiding this comment.
This should really be an early return, with a few error messages in case it gets triggered, depending on the context (like no comments yet, fetch failed…)
www/layouts/partials/comments.html
Outdated
| ) { | ||
| commentsWrapper.innerHTML = ""; | ||
|
|
||
| descendants.forEach(function (status) { |
There was a problem hiding this comment.
There is quite a bit of code needed to properly render a comment, so it could be nice to make it a web component. If it requires too much work on your end, we can leave this as is and I’ll come back to it later, it’s not that big a deal.
There was a problem hiding this comment.
Not sure how to do it properly, so I will leave it to you if you don't mind.
|
New commits to separate js code |
It is needed to add params at top of an article to enable comments feature.
Example: